<script setup>
import { ref } from 'vue'
import socket from '@/util/socket';
import { userIdStore } from '@/util/id';
const idStore = userIdStore();
const Data = ref({
  type: "message",
  payload: {
    "content": "Hello",
    "sender": "user123"
  },
  timestamp: new Date().toISOString() // 确保时间戳有实际值
});
const LoginData = ref({
  type: "LOGIN",
  payload: {
    "username": "molidis",
    "password": "123456"
  },
  timestamp: new Date().toISOString() // 确保时间戳有实际值
});
const RegisterData = ref({
  type: "REGISTER",
  payload: {
    "username": "ljw",
    "password": "123456"
  },
  timestamp: new Date().toISOString() // 确保时间戳有实际值
});

const SINGLE_MESSAGE_Data = ref({
  type: "SINGLE_MESSAGE",
  payload: {
    "senderId": "molidis",
    "targetId": "Li",
    "content": "你好"
  },
  timestamp: new Date().toISOString() // 确保时间戳有实际值
});

const link = () => {
  //socket获取连接
  // socket = new WebSocket('ws://localhost:9000/ws');
}

const sendMsg = () => {
  // 将Data.value转换为JSON字符串后发送
  const jsonData = JSON.stringify(Data.value);
  socket.send(jsonData);
}
// const sendLoginMsg = () => {
//   socket.send(JSON.stringify(LoginData.value));
// }
const sendRegisterMsg = () => {
  socket.send(JSON.stringify(RegisterData.value));
}
const sendSINGLEMsg = () => {
  socket.send(JSON.stringify(SINGLE_MESSAGE_Data.value));
}
const sendSingleMsg1 = () => {
  //给molidis
  SINGLE_MESSAGE_Data.value.payload.senderId = 2;
  SINGLE_MESSAGE_Data.value.payload.targetId = 1;
  SINGLE_MESSAGE_Data.value.payload.content = "你好molidis";
  socket.send(JSON.stringify(SINGLE_MESSAGE_Data.value));
}
const sendSingleMsg2 = () => {
    //给ljw
  SINGLE_MESSAGE_Data.value.payload.senderId = 1;
  SINGLE_MESSAGE_Data.value.payload.targetId = 2;
  SINGLE_MESSAGE_Data.value.payload.content = "你好ljw";
  socket.send(JSON.stringify(SINGLE_MESSAGE_Data.value));
}



const JoinRoomData = ref({
  type: "JOIN_ROOM",
  payload: {
    "senderId": "molidis",
    "targetId": "Li",
    "content": "你好"
  },
  timestamp: new Date().toISOString() // 确保时间戳有实际值
});
const sendJoinRoomMsg = () => {
    //给ljw
  socket.send(JSON.stringify(JoinRoomData.value));
}

const RoomMsgData = ref({
  type: "ROOM_MESSAGE",
  payload: {
    "senderId": "molidis",
    "targetId": "Li", 
    "content": "你好"
  },
  timestamp: new Date().toISOString() // 确保时间戳有实际值
});
const sendRoomMsg = () => {
  socket.send(JSON.stringify(RoomMsgData.value));
}




// 新增登录表单数据
const loginForm = ref({
  username: '',
  password: ''
})
// 新增响应数据存储
const loginResponse = ref(null)

// 修改后的登录方法
const sendLoginMsg = () => {
  const data = {
    type: "LOGIN",
    payload: {
      username: loginForm.value.username,
      password: loginForm.value.password
    },
    timestamp: new Date().toISOString()
  }
  socket.send(JSON.stringify(data));
  
  // 监听socket消息（假设在组件创建时已经建立过监听）
  socket.onmessage = (event) => {
    const response = JSON.parse(event.data)
    loginResponse.value = response;
    idStore.setId(loginResponse.value.data);
  }
}
</script>
<template>
  <div>
    <button width="500px" @click="link()">重新连接</button>
  </div>
  <div>
    <button width="500px" @click="sendMsg()">测试</button>
  </div>
  <div>
    <button width="500px" @click="sendLoginMsg()">登录</button>
  </div>  
  <div>
    <button width="500px" @click="sendRegisterMsg()">注册</button>
  </div>
  <div>
    <button width="500px" @click="sendSINGLEMsg()">私发信息</button>
  </div>
  <div>
    <button width="500px" @click="sendSingleMsg1()">发信息给molidis</button>
  </div>
  <div>
    <button width="500px" @click="sendSingleMsg2()">发信息给ljw</button>
  </div>
  <div>
    <button width="500px" @click="sendJoinRoomMsg()">加入群聊</button>
  </div>
  <div>
    <button width="500px" @click="sendRoomMsg()">群发消息"发大家好"</button>
  </div>


  <div>
    <!-- 新增输入框 -->
    <input v-model="loginForm.username" placeholder="用户名">
    <input v-model="loginForm.password" type="password" placeholder="密码">
    <button @click="sendLoginMsg">登录</button>
    <!-- 显示返回结果 -->
    <div v-if="loginResponse">
      登录结果：{{ loginResponse }}
    </div>
  </div>

</template>

